<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Hogeschool Van Amsterdam - Messages</title>
		<link rel="icon" href="../ressources/general/favicon.ico" />
		<link href="../css/a-font-face.css" rel="stylesheet" media="screen">
		<link href="../css/messages.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.hashchange.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easytabs.js"></script>
		<script type="text/javascript">
    		$(document).ready( function() {
      			$('#tab-container').easytabs();
    		});
  		</script>
	</head>

	<body>

		<div id="top">
			<div id="top-left">
				HOGESCHOOL VAN AMSTERDAM
			</div>
			<nav id="colorNav">
				<ul>
					<li class="green">
						<a href="#" class="icon-home">GROUPS <span class="notif">(3)</span></a>
						<ul>
							<li><a href="groups.html">Student X add you in a new group</a></li>
							<li><a href="groups.html">Student Y settle a new deadline</a></li>
							<li><a href="groups.html">Student Z upload a new file</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">HOMEWORK <span class="notif">(4)</span></a>
						<ul>
							<li><a href="homework.html">You have 1 new homework in Entrepreneurship</a></li>
							<li><a href="homework.html">You have 1 new homework in Personal Leadership</a></li>
							<li><a href="homework.html">You have 3 new homework in International Money & Finance</a></li>
							<li><a href="homework.html">You have 2 new homework in Debating in English</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">MESSAGES <span class="notif">(2)</span></a>
						<ul>
							<li><a href="messages.html">Student X send you a message</a></li>
							<li><a href="messages.html">Student Y send you a message</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">OTHERS <span class="notif">(2)</span></a>
						<ul>
							<li><a href="#">Teacher A is absent today</a></li>
							<li><a href="calendar_week.html">Schedule modification for your Financial Trade course</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">Student X</a>
						<ul>
							<li><a href="#">My profile</a></li>
							<li><a href="#">My marks</a></li>
							<li><a href="../index.html">Disconnect</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
				</ul>
			</nav>
		</div>

		<div id="page">

			<div id="header">
				<ul id="menu">
					<a href="home.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_home">
								HOME
							</div>
						</li>
					</a>
					<a href="calendar.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_calendar">
								CALENDAR
							</div>
						</li>
					</a>
					<a href="homework.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_homework">
								HOMEWORK
							</div>
						</li>
					</a>
					<a href="files.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_files">
								FILES
							</div>
						</li>
					</a>
					<a href="groups.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_groups">
								GROUPS
							</div>
						</li>
					</a>
					<a href="messages.html">
						<li class="list_menu">
							<div class="list_menu_active" id="list_menu_messages">
								MESSAGES
							</div>
						</li>
					</a>
				</ul>
			</div>

			<div id="options">
				<div id="options_left">
					<a href="groups/create_a_group.html" class="button">New message</a>
				</div>
				<div id="options_right">
				</div>
			</div>

			<div id="files">
				
				<div id="tab-container" class='tab-container'>
					<ul class='etabs'>
					  <li class='tab'><a href="#antoine">
					  	<span class="author">ANTOINE</span><br>
					  	<span class="date">15/01/2013 at 21:31</span>
					  </a></li>
					  <li class='tab'><a href="#guillaume">
					  	<span class="author">GUILLAUME</span><br>
					  	<span class="date">15/01/2013 at 17:30</span>
					  </a></li>
					  <li class='tab'><a href="#marine">
					  	<span class="author">MARINE</span><br>
					  	<span class="date">14/01/2013 at 23:50</span>
					  </a></li>
					  <li class='tab'><a href="#romel">
					  	<span class="author">ROMEL</span><br>
					  	<span class="date">12/01/2013 at 8:03</span>
					  </a></li>
					  <li class='tab'><a href="#brendan">
					  	<span class="author">BRENDAN</span><br>
					  	<span class="date">11/01/2013 at 9:12</span>
					  </a></li>
					</ul>


					<div class='panel-container'>
						<div id="antoine">
					    	<div class="colon_left">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Antoine<br>
					    		Vinial
					    	</div>
					    	<div class="colon_middle">
					    		<div class="question">
					    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
					    			Nam consequat erat commodo arcu cursus a tincidunt justo consequat.
					    			<span class="message_date">15/01/2013 at 21:26</span>
					    		</div>
					    		<div class="answer">
					    			Aliquam auctor ligula a arcu condimentum rutrum sodales nibh imperdiet.
					    			<span class="message_date">15/01/2013 at 21:27</span>
					    		</div>
					    		<div class="question">
					    			Pellentesque suscipit mi quis felis faucibus eu vulputate turpis ullamcorper. <br>
					    			Quisque eu nulla diam.<br>
					    			Suspendisse ut lectus nibh.
					    			<span class="message_date">15/01/2013 at 21:31</span>
					    		</div>
					    		<form>
									<textarea placeholder="Write your message..." name="message" id="new_message"></textarea>
								</form>
					    	</div>
					    	<div class="colon_right">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Me
					    	</div>
						</div> 
						<div id="guillaume">
					       <div class="colon_left">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Guillaume<br>
					    		Hernandez
					    	</div>
					    	<div class="colon_middle">
					    		<div class="question">
					    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
					    			Nam consequat erat commodo arcu cursus a tincidunt justo consequat.
					    			<span class="message_date">15/01/2013 at 17:29</span>
					    		</div>
					    		<div class="answer">
					    			Aliquam auctor ligula a arcu condimentum rutrum sodales nibh imperdiet.
					    			<span class="message_date">15/01/2013 at 17:30</span>
					    		</div>
					    		<form>
									<textarea placeholder="Write your message..." name="message" id="new_message"></textarea>
								</form>
					    	</div>
					    	<div class="colon_right">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Me
					    	</div>
						</div> 
						<div id="marine">
					       <div class="colon_left">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Marine<br>
					    		Fabbricino
					    	</div>
					    	<div class="colon_middle">
					    		<div class="question">
					    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
					    			Nam consequat erat commodo arcu cursus a tincidunt justo consequat.
					    			<span class="message_date">14/01/2013 at 23:49</span>
					    		</div>
					    		<div class="answer">
					    			Aliquam auctor ligula a arcu condimentum rutrum sodales nibh imperdiet.
					    			<span class="message_date">14/01/2013 at 23:50</span>
					    		</div>
					    		<form>
									<textarea placeholder="Write your message..." name="message" id="new_message"></textarea>
								</form>
					    	</div>
					    	<div class="colon_right">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Me
					    	</div>
						</div> 
						<div id="romel">
					       <div class="colon_left">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Romel<br>
					    		Augustin
					    	</div>
					    	<div class="colon_middle">
					    		<div class="question">
					    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
					    			Nam consequat erat commodo arcu cursus a tincidunt justo consequat.
					    			<span class="message_date">12/01/2013 at 8:01</span>
					    		</div>
					    		<div class="answer">
					    			Aliquam auctor ligula a arcu condimentum rutrum sodales nibh imperdiet.
					    			<span class="message_date">12/01/2013 at 8:03</span>
					    		</div>
					    		<form>
									<textarea placeholder="Write your message..." name="message" id="new_message"></textarea>
								</form>
					    	</div>
					    	<div class="colon_right">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Me
					    	</div>
						</div> 
						<div id="brendan">
					       <div class="colon_left">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Brendan<br>
					    		Delovitch
					    	</div>
					    	<div class="colon_middle">
					    		<div class="question">
					    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
					    			Nam consequat erat commodo arcu cursus a tincidunt justo consequat.
					    			<span class="message_date">11/01/2013 at 9:08</span>
					    		</div>
					    		<div class="answer">
					    			Aliquam auctor ligula a arcu condimentum rutrum sodales nibh imperdiet.
					    			<span class="message_date">11/01/2013 at 9:12</span>
					    		</div>
					    		<form>
									<textarea placeholder="Write your message..." name="message" id="new_message"></textarea>
								</form>
					    	</div>
					    	<div class="colon_right">
					    		<img class="profil_picture" src="../ressources/messages/profil_picture.png"><br>
					    		Me
					    	</div>
						</div> 
					</div>
				</div>



				
			</div>

		</div>
	</body>
</html>